<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面布局一</title>
		<style>
		    body,html{
		    	width: 100%;
		    	height: 100%;
		    	margin: 0;
		    	padding: 0;
		    	overflow-x: hidden;
		    	border: 1px solid #ff0000;
		    }
		    .containner{
		    	width: 100%;
		    	height: 100%;
		    	position: relative;
		    }
			.header{
				width: 100%;
				height: 40px;
				background: lightblue;
			}
			.headerContent{
				width: 80%;
				height: 100%;
				margin: auto;
				border: 1px solid #000;
			}
			.main{
				width:100%;
				height: 600px;
				/*background: url(images/banner.jpg) top center ;*/
				border: 1px solid #ff0000;
			}
			.details{
				width: 80%;
				height: 280px;
				margin: auto;
				border: 1px solid #000;
			}
			.footer{
				width: 100%;
				height: 40px;
				background: lightblue;
				position: absolute;
				bottom: 0;
				}
		</style>
	</head>
	<body>
		<div class="containner">
			<div class="header">
				<div class="headerContent"></div>
			</div>
			<div class="main">
				
			</div>
			
			<div class="details"></div>
			
			<div class="footer"></div>
			
		</div>
		
	</body>
</html>
